<template>
    <a href="/">新增角色</a>
    <h1>角色列表</h1>
    <input type="text" v-model="dataps.uname" />
    <select v-model="dataps.tid">
        <option value="0">选择职业</option>
        <option v-for="d in Bang" :value="d.Tid">{{ d.Tname }}</option>
    </select>
    <input type="button" value="查询" @click="querydata" />
    <div>
        <table class="table">
            <thead>
                <tr>
                    <th>主键</th>
                    <th>角色名</th>
                    <th>性别</th>
                    <th>生日</th>
                    <th>状态</th>
                    <th>手机号</th>
                    <th>证件号</th>
                    <th>职业类型</th>
                    <th>证件类型</th>
                    <th>职业名称</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="d in data">
                    <td>{{ d.Uid }}</td>
                    <td>{{ d.Uname }}</td>
                    <td>{{ d.Set }}</td>
                    <td>{{ moment(d.Barder).format("yyyy-MM-DD") }}</td>
                    <td>{{ d.Sarter?"启用":"禁用" }}</td>
                    <td>{{ d.Phone }}</td>
                    <td>{{ d.ZJH }}</td>
                    <td>{{ d.Tid }}</td>
                    <td>{{ d.Zid }}</td>
                    <td>{{ d.Tname }}</td>
                    <td>
                        <input v-if="d.Sarter == 0" type="button" value="启用" @click="updatestart(d.Uid)" />
                        <input v-else type="button" value="禁用" @click="updatestart(d.Uid)" />
                    </td>
                    <td>
                        <input type="button" value="编辑" @click="toEditor(d.Uid)" />
                    </td>
                </tr>
            </tbody>
        </table>
        一共{{ datacount.Count }}条，每页显示{{ dataps.size }}条，一共{{ datacount.pagecount }}页，当前第{{ dataps.index }}页

        <input type="button" @click="pageindex(1)" value="首页">
        <input type="button" @click="pageindex(2)" value="上一页">

        <input type="button" value="1">
        <input type="button" value="2">
        <input type="button" value="3">
        <input type="button" value="4">

        <input type="button" @click="pageindex(3)" value="下一页">
        <input type="button" @click="pageindex(4)" value="尾页">
        <input type="number" v-model="dataps.index" style="width: 50px;"> <input type="button" value="跳转"
            @click="skippage">

        <select v-model="dataps.size" @change="setsize">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
    </div>
</template>

<script setup lang="ts">
import moment from "moment";
import axios from 'axios';
import { ref, onMounted } from 'vue'
import { useRouter } from "vue-router";
const router = useRouter();
//页容量
const setsize = () => {
    getdata();
}
//编辑跳转
const toEditor = (id: number) => {
    router.push({ path: "/userxg", query: { id: id } });
};
//跳转
const skippage = () => {
    //判断当前页码是否有效
    if (dataps.value.index < 1 || dataps.value.index > datacount.value.pagecount) {
        alert('页码无效')

        dataps.value.index = 1; //实际看业务要求
    }
    getdata()
}

//翻页2
const page2index = (val: any) => {
    if (val < 1) {
        dataps.value.index = 1;
        getdata();
        return;
    }
    //找出是点的上一页按钮，还是点的下一页按钮
    if (val > datacount.value.pagecount) {
        dataps.value.index = datacount.value.pagecount;
        getdata();
        return;
    }

    dataps.value.index = val;
    getdata();
}

//翻页
const pageindex = (val: number) => {
    if (val == 1) {
        dataps.value.index = 1;
        getdata();
    }
    //上一页要注意页码大于1时才可以减1，要保证页码要大于等级1
    if (val == 2 && dataps.value.index > 1) {
        dataps.value.index--;
        getdata();
    }
    //下一页要注意页码必须小于最大分页数量
    if (val == 3 && dataps.value.index < datacount.value.pagecount) {
        dataps.value.index++;
        getdata();
    }

    if (val == 4) {
        dataps.value.index = datacount.value.pagecount;
        getdata();
    }
}
//查询
const querydata = () => {
    getdata();
    bang();
};
onMounted(() => {
    bang();
})
const bang = () => {
    axios.get("api/User/bang").then(res => {
        Bang.value = res.data
    })

}
const Bang = ref([{
    "Tid": 0,
    "Tname": "老师",
   
}])
onMounted(() => {
    getdata()
    getdata()
})
//上架或下架
const updatestart = (val: number) => {
    axios.get("/api/User/UpdateStart", { params: { id: val } }).then((res) => {
        if (res.data > 0) {
            alert("状态修改成功");
            getdata();
        } else {
            alert("状态修改失败。。");
        }
    });
};

//状态数组
const slist = [
    { id: 0, Stare: "启用" },
    { id: 2, Stare: "禁用" },
];
//分页条件
const dataps = ref({
    index: 1, //默认页码为1
    size: 2, //默认页容量为2条
    uname:"",
    tid:0
})


const datacount = ref({
    Count: 0,    //保存总记录数
    pagecount: 0,
    //保存总页灵敏
})

const data = ref([{
    "Uid": 1,
      "Uname": "",
      "Set": "",
      "ZJH": "",
      "Barder": "2024-07-18T00:00:00",
      "Adress": "",
      "Zid": 0,
      "Phone": "",
      "Sarter": 0,
      "Tid": 0,
      "Tname": ""
}])  //保存会员集合
const getdata = () => {
    axios.get("/api/User/xisnshi", { params: dataps.value }).then(res => {
        data.value = res.data.Members //保存会员集合
        datacount.value.Count = res.data.Count //保存总记录数

        datacount.value.pagecount = Math.ceil(datacount.value.Count / dataps.value.size);   //保存总页灵敏
    });
}


</script>

<style scoped></style>